<template>
  <div class="edit-address">
    <van-form class="form" @submit="onSubmit">
      <van-field
        v-model="formData.userName"
        placeholder="姓名"
        :rules="[{ required: true, message: '姓名不能为空' }]"
      />
      <van-field
        v-model="formData.telNumber"
        placeholder="手机号"
        :rules="[{ pattern, required: true, message: '手机号输入错误' }]"
      />

      <van-field
        v-model="formData.address"
        placeholder="省份、城市、区县"
        :rules="[{ required: true, message: '省份、城市、区县不能为空' }]"
        @click="showPop = true"
      />
      <van-field
        v-model="formData.detailadress"
        placeholder="详细地址，如楼道、楼盘号等"
        :rules="[{ required: true, message: '详细地址不能为空' }]"
      />

      <div class="checkbox">
        <van-checkbox
          v-model="formData.checked"
          shape="square"
          checked-color="#b4282d"
          >设置成默认地址</van-checkbox
        >
      </div>
      <div class="footer">
        <van-button
          type="info"
          class="submit"
          color="#b4282b"
          native-type="submit"
          >保存</van-button
        >
      </div>
    </van-form>

    <van-popup v-model="showPop" position="bottom" :style="{ height: '40%' }">
      <van-area
        :area-list="areaList"
        @confirm="popConfirm"
        @cancel="popCancel"
        :value="cityCode"
      />
    </van-popup>
  </div>
</template>
<script>
import { areaList } from "@vant/area-data";
import { saveAction, detailAction } from "@/api/addressmanage";
export default {
  data() {
    return {
      showPop: false, // 地址弹框显示
      // form 数据
      formData: {
        userName: "",
        telNumber: "",
        address: "",
        detailadress: "",
        checked: false,
      },
      addressId: "", // 地址id
      areaList, // 地区数据
      pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/, // 手机号正则校验
      cityCode: "0", // 当前地址的城市地区码,用于编辑时回显
    };
  },
  methods: {
    // 城市选择点击确认后
    popConfirm(addressList) {
      this.showPop = false;
      this.formData.address = addressList
        .map((item) => {
          return item.name;
        })
        .join("  ");
    },
    // 城市选择点击取消后
    popCancel() {
      this.showPop = false;
    },
    // 保存
    async onSubmit() {
      const { data } = await saveAction({
        ...this.formData,
        openId: localStorage.getItem("openId"),
        addressId: this.addressId,
      });
      if (data) {
        this.$toast("保存成功");
        this.$router.go(-1);
      } else {
        this.$toast("保存失败,请稍后再试");
      }
    },
    // 获取地址信息
    async getAddressInfo() {
      const { data } = await detailAction({
        id: this.addressId,
      });
      this.formData = {
        userName: data.name,
        telNumber: data.mobile,
        address: data.address,
        detailadress: data.address_detail,
        checked: data.is_default == 1,
      };
      // 分隔地址取出最后的地区名
      const addressArr = data.address.split(" ");
      const county = addressArr[addressArr.length - 1];
      // 通过地区名从areaList中到地区码
      const find = Object.keys(areaList.county_list).find((item) => {
        return areaList.county_list[item] == county;
      });
      this.cityCode = find;
    },
  },

  created() {
    let addressId = this.$route.query.id;
    if (addressId) {
      this.addressId = addressId;
      this.getAddressInfo();
    }
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
